<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人事管理系统</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 登录界面 -->
    <div class="login-container" id="loginContainer">
        <form id="loginForm">
            <h2>登录</h2>
            <div class="form-group">
                <input type="text" id="username" placeholder="用户名" required>
            </div>
            <div class="form-group">
                <input type="password" id="password" placeholder="密码" required>
            </div>
            <button type="submit">登录</button>
            <p id="loginMessage"></p>
            <button type="button" onclick="showRegisterForm()">注册</button>
        </form>
    </div>

    <!-- 注册界面 -->
    <div class="register-container" id="registerContainer" style="display: none;">
        <form id="registerForm">
            <h2>注册</h2>
            <div class="form-group">
                <input type="text" id="registerUsername" placeholder="用户名" required>
            </div>
            <div class="form-group">
                <input type="password" id="registerPassword" placeholder="密码" required>
            </div>
            <button type="submit">注册</button>
            <p id="registerMessage"></p>
            <button type="button" onclick="showLoginForm()">返回登录</button>
        </form>
    </div>

    <div class="nav" id="nav" style="display: none;">
        <ul class="navlist">
            <li class="btli" id="management-interface"><a>管理界面</a></li>
            <li class="btli" id="personnel-change-record"><a>人员变更记录</a></li>
            <li class="btli" id="department-information"><a>部门信息</a></li>
        </ul>
    </div>

    <!-- 操作界面 -->
    <div class="management-container" id="managementContainer" style="display: none;">
        <h2>员工管理</h2>
        <div class="search-container">
            <form id="searchEmployeeForm">
                <select id="searchCriteria">
                    <option value="ID">员工号</option>
                    <option value="NAME">姓名</option>
                    <option value="DEPARTMENT">部门</option>
                    <option value="AUTHORITY">权限</option>
                    <option value="POSITION">职位</option>
                    <!-- 可以根据需要添加更多选项 -->
                </select>
                <input type="text" id="searchInput" placeholder="请输入查找内容">
                <button type="submit">查找</button>
            </form>
        </div>
        <table>
            <thead>
                <tr>
                    <th>员工号</th>
                    <th>权限</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>生日</th>
                    <th>所在部门</th>
                    <th>职务</th>
                    <th>受教育程度</th>
                    <th>专业技能</th>
                    <th>家庭住址</th>
                    <th>联系电话</th>
                    <th>电子邮箱</th>
                    <th>当前状态</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="staffTableBody">
            </tbody>
        </table>
        <button onclick="showAddStaffForm()">添加员工</button>
    </div>

    <!-- 添加员工表单 -->
    <div class="add-Staff-container" id="addStaffContainer" style="display: none;">
        <form id="addStaffForm">
            <h2>增加员工</h2>

            <!-- <div class="form-group-item">
                <label for="staffid">员工号：</label>
                <input type="text" id="addStaffId" placeholder="员工号" required>
            </div> -->
            
            <div class="form-group-item">
                <label for="staffauthority">权限：</label>
                <select id="addStaffAuthority">
                    <option value="普通">普通</option>
                    <option value="管理">管理</option>
                </select>
            </div>

            <div class="form-group-item">
                <label for="staffname">姓名：</label>
                <input type="text" id="addStaffName" placeholder="姓名" required>
            </div>

            <div class="form-group-item">
                <label for="staffsex">性别：</label>
                <select id="addStaffSex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <!-- <input type="text" id="addStaffSex" placeholder="性别" required> -->
            </div>
            
            <div class="form-group-item">
                <label for="staffbirthday">生日：</label>
                <input type="date" id="addStaffBirthday" placeholder="生日" required>
            </div>

            <div class="form-group-item">
                <label for="staffdepartment">部门：</label>
                <select id="addStaffDepartment">
                    <option value="医疗部">医疗部</option>
                    <option value="工程部">工程部</option>
                    <option value="教官团队">教官团队</option>
                    <option value="精英干员">精英干员</option>
                    <option value="行动组">行动组</option>
                </select>
            </div>
            
            <div class="form-group-item">
                <label for="staffposition">职务：</label>
                <input type="text" id="addStaffPosition" placeholder="职务" required>
            </div>
            
            <div class="form-group-item">
                <label for="staffeducation">学历：</label>
                <select id="addStaffEducation">
                    <option value="小学">小学</option>
                    <option value="初中">初中</option>
                    <option value="高中">高中</option>
                    <option value="职高">职高</option>
                    <option value="本科">本科</option>
                    <option value="专科">专科</option>
                    <option value="硕士">硕士</option>
                    <option value="博士">博士</option>
                    <option value="博士后">博士后</option>
                </select>
            </div>
            
            <div class="form-group-item">
                <label for="staffskill">技能：</label>
                <input type="text" id="addStaffSkill" placeholder="专业技能" required>
            </div>

            <div class="form-group-item">
                <label for="staffaddress">住址：</label>
                <input type="text" id="addStaffAddress" placeholder="家庭住址" required>
            </div>

            <div class="form-group-item">
                <label for="stafftel">电话：</label>
                <input type="text" id="addStaffTel" placeholder="联系电话" required>
            </div>
            
            <div class="form-group-item">
                <label for="staffemail">邮箱：</label>
                <input type="email" id="addStaffEmail" placeholder="邮箱" required>
            </div>
            
            <div class="form-group-item">
                <label for="staffstatus">状态：</label>
                <select id="addStaffStatus">
                    <option value="在职">在职</option>
                    <option value="离职">离职</option>
                </select>
                <!-- <input type="text" id="addStaffStatus" placeholder="当前状态" required> -->
            </div>
            
            <div class="form-group-item">
                <label for="staffremark">备注：</label>
                <input type="text" id="addStaffRemark" placeholder="备注" required>
            </div>
            <button type="submit">增加</button>
            <p id="addStaffMessage"></p>
            <button type="button" onclick="showManagementForm()">返回管理</button>
        </form>
    </div>

    <!-- 修改员工信息的表单 -->
    <div id="updateEmployeeModal" style="display: none;" class="popup">
        <div>
            <h2>修改员工信息</h2>
            <form id="updateEmployeeForm">
                <div class="form-group">
                    <div class="form-group-item">
                        <label for="employeeId">员工ID：</label>
                        <input type="text" id="employee-Id" name="employeeId" readonly required>
                    </div>

                    <div class="form-group-item">
                        <label for="employeeName">姓名：</label>
                        <input type="text" id="employee-Name" name="employeeName" required>
                    </div>

                    <div class="form-group-item">
                        <label for="employeeAuthority">权限：</label>
                        <select id="employee-Authority">
                            <option value="普通">普通</option>
                            <option value="管理">管理</option>
                        </select>
                    </div>
                    <div class="form-group-item">
                        <label for="employeeSex">性别：</label>
                        <select id="employee-Sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group-item">

                        <label for="employeeBirthday">生日：</label>
                        <input type="date" id="employee-Birthday" name="employeeBirthday" required>
                    </div>
                    <div class="form-group-item">
                        <label for="employeeDepartment">部门：</label>
                        <input type="text" id="employee-Department" name="employeeDepartment" required>
                    </div>
                    <div class="form-group-item">
                        <label for="employeePosition">职位：</label>
                        <input type="text" id="employee-Position" name="employeePosition" required>
                    </div>
                    <div class="form-group-item">
                        <label for="employeeEducation">学历：</label>
                        <select id="employee-Education">
                            <option value="小学">小学</option>
                            <option value="初中">初中</option>
                            <option value="高中">高中</option>
                            <option value="职高">职高</option>
                            <option value="本科">本科</option>
                            <option value="专科">专科</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                            <option value="博士后">博士后</option>
                        </select>
                    </div>
                    <div class="form-group-item">
                        <label for="employeeSkill">技能：</label>
                        <input type="text" id="employee-Skill" name="employeeSkill" required>
                    </div>
                    <div class="form-group-item">

                        <label for="employeeAddress">地址：</label>
                        <input type="text" id="employee-Address" name="employeeAddress" required>
                    </div>
                    <div class="form-group-item">
                        <label for="employeeTel">电话：</label>
                        <input type="text" id="employee-Tel" name="employeeTel" required>
                    </div>
                    <div class="form-group-item">

                        <label for="employeeEmail">邮箱：</label>
                        <input type="email" id="employee-Email" name="employeeEmail" required>
                    </div>
                    <div class="form-group-item">
                        <label for="employeeStatus">状态：</label>
                        <select id="employee-Status">
                            <option value="在职">在职</option>
                            <option value="离职">离职</option>
                        </select>
                    </div>
                    <div class="form-group-item">
                        <label for="employeeRemark">备注：</label>
                        <input type="text" id="employee-Remark" name="employeeRemark" required>
                    </div>
                    <!-- 下面两个按钮，如果不想再同一行的话，可以把div删除了 -->

                    <button type="submit">提交修改</button>
                    <button type="button" id="cancelUpdate">取消</button>
            </form>
        </div>
    </div>
    </div>

    <div class="department-container" id="departmentContainer" style="display: none;">
        <h2>部门管理</h2>
        <table>
            <thead>
                <tr>
                    <th>部门编号</th>
                    <th>部门名称</th>
                    <th>部门经理</th>
                    <th>简介</th>
                </tr>
            </thead>
            <tbody id="departmentTableBody">
            </tbody>
        </table>
    </div>

    <div class="employeechange-container" id="employeechangeContainer" style="display: none;">
        <h2>人员变更记录</h2>
        <table>
            <thead>
                <tr>
                    <th>员工号</th>
                    <th>名称</th>
                    <th>变更情况</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody id="employeechangeTableBody">
            </tbody>
        </table>
    </div>

    <script src="script.js"></script>
</body>

</html>